@import '_colors.pcss';
@import '_reset.pcss';
@import '_fonts.pcss';
@import '_context.pcss';
@import '_shadows.pcss';
@import '_typography.pcss';

:root {
  color: var(--color-neutral-txt-primary);
  background-color: var(--color-neutral-background-primary);
  text-rendering: optimizeLegibility;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &.dark {
    color-scheme: dark;
  }

  --scrollbar-width: 1.4rem;
  --scrollbar-border: 0.4rem;
  --scrollbar-thumb-color: var(--color-brand-item-active);
  --scrollbar-track-color: var(--color-brand-background-selected);

  /* Firefox/Gecko and Chrome versions >= 121 */
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
  scrollbar-width: auto;

  /* Chrome/Webkit */

  ::-webkit-scrollbar {
    width: var(--scrollbar-width);
  }

  ::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border: var(--scrollbar-border) solid transparent;
    border-radius: 90rem;
    background-clip: content-box;
  }
}

a {
  color: var(--color-brand-txt-base);
}

code,
code *,
pre {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.card-view {
  padding: 1.2rem;
  display: flex;
  gap: 2rem;
}

.link {
  text-decoration: underline;
  color: var(--color-brand-txt-base);
  cursor: pointer;
}

.link:hover {
  color: var(--color-brand-txt-hover);
}

.link:active,
.link.router-link-active {
  color: var(--color-brand-txt-active);
}

.link.router-link-active {
  text-decoration: underline;
}

.scrollbar-small {
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    --scrollbar-width: 0.7rem;
  }

  &::-webkit-scrollbar-thumb {
    --scrollbar-border: 0.2rem;
  }
}
